<template>
  <div class="dashboard-container">
    <!-- 完成了学科跳转功能 -->
    <!-- 完成了添加目录功能 -->
    <!-- 完成了搜索功能 -->
    <!-- 完成了删除功能 -->
    <!-- 完成了编辑功能，数据提交不了，接口有问题 -->
    <!-- 完成了状态的开启禁用模块，接口只能提交id，不能提交状态，刷新回归原始状态 -->
    <!-- 卡片区 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="formInline" ref="formInlineRef">
        <el-form-item label="目录名称">
          <el-input v-model="requestParameters.directoryName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-button @click="empty()">清除</el-button>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button
          class="filter-item"
          style="float:right"
          type="success"
          @click="addDialogVisible = true"
          icon="el-icon-edit"
          title="新增目录"
        >新增目录</el-button>
      </el-form>
      <el-alert class="alert" :title="`数据一共${total}条`" type="info" show-icon></el-alert>

      <!-- 表格内容展示区域 -->
      <el-table :data="directoryslist" style="width: 100%" highlight-current-row>
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="241px"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="238px"></el-table-column>
        <el-table-column prop="username" label="创建者" width="238px"></el-table-column>
        <el-table-column label="创建日期" width="238px">
          <template slot-scope="scope">
            <span>{{scope.row.addDate|parseTimeByString}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="200px"></el-table-column>
        <el-table-column label="状态" width="200px">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.state==1">启用</span>
            <span v-else>禁用</span>-->
            <span v-if="scope.row.state===0">已禁用</span>
            <span v-else-if="scope.row.state===1">已启用</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" class-name="small-padding fixed-width" width="224px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleChange(scope.row)"
              :disabled="scope.row.state===1?true:false"
            >修改</el-button>
            <el-button
              type="text"
              @click="disabled(scope.row.id,scope.row.state)"
            >{{scope.row.state===1?'禁用':'启用'}}</el-button>
            <el-button
              type="text"
              @click="remove(scope.row.id)"
              :disabled="scope.row.state===1?true:false"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :total="total"
          :page-size="requestParameters.pagesize"
          :page-sizes="[5,10,20,30,]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-row>
    </el-card>
    <!-- 新增目录对话框 -->
    <el-dialog title="添加目录" :visible.sync="addDialogVisible" width="400px">
      <!-- 内容区域 -->
      <el-form :model="ruleForm" label-width="100px" :rules="ruleFormRules" ref="ref">
        <el-form-item label="所属学科">
          <!-- <el-input v-model="ruleForm.subjectName"></el-input> -->
          <el-select v-model="ruleForm.subjectID" style="width:260px">
            <el-option
              v-for="(item,index) in mylist"
              :key="index"
              @click="getList(scope.row)"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="ruleForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="canclelass">取 消</el-button>
        <el-button type="primary" @click="addClass(ruleForm)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改目录 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editdialogVisible"
      width="400px"
      :before-close="editCanclelass"
    >
      <!-- 内容区域 -->
      <el-form :model="editForm" :rules="editFormRules" ref="ref" label-width="100px">
        <el-form-item label="所属学科" prop="subjectName">
          <!-- <el-input v-model="editForm.creatorID"></el-input> -->
          <el-select v-model="ruleForm.subjectID" style="width:260px">
            <el-option
              v-for="(item,index) in mylist"
              :key="index"
              @click="getList(scope.row)"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="editForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCanclelass=false">取 消</el-button>
        <el-button type="primary" @click="addEditClass()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  simple,
  detail,
  add,
  update,
  state,
  remove,
  changeState
} from "@/api/hmmm/directorys.js";
import { list as sublist } from "@/api/hmmm/subjects.js";
// 时间格式化
// 导入时间过滤器
import { parseTimeByString } from "@/filters/index.js";
export default {
  name: "DirectorysList",
  data() {
    return {
      counts: 0, //总数据量
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },

      // 搜索
      formInline: {
        directoryName: "",
        state: []
      },
      mylist: [],
      // 标签列表
      tagsList: [],
      // 是否为编辑
      titleInfo: {
        id: 0,
        text: "",
        pageTitle: "修改目录"
      },
      // 控制新增学科对话框的显示与隐藏
      addDialogVisible: false,
      // 添加目录
      dialogVisible: false,
      ruleForm: {
        subjectID: "",
        subjectName: ""
      },
      ruleFormRules: {
        directoryName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
          { max: 10, message: "长度不能超过 10 个字符", trigger: "blur" }
        ]
      },
      // 修改
      editdialogVisible: false,
      editForm: {
        id: "",
        creatorID: 0,
        directoryName: ""
      },
      editFormRules: {
        directoryName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
          { max: 10, message: "长度不能超过 10 个字符", trigger: "blur" }
        ]
      },
      obj: {},
      input: "",
      value: "true",
      tableData: [],
      directoryslist: [],
      total: null
    };
  },
  created() {
    this.getDirectorysList();
  },
  methods: {
    // 点击清除按钮，清除输入框里面的字符
    empty() {
      // 判断输入框里面是否有内容，有的话清空
      if (this.requestParameters.directoryName) {
        this.requestParameters.directoryName = "";
      }
    },

    // 每页显示信息条数
    handleSizeChange(newSize) {
      this.requestParameters.page === 1;
      this.requestParameters.pagesize = newSize;
      this.getDirectorysList(this.requestParameters);
    },
    // 进入某一页
    handleCurrentChange(newPage) {
      this.requestParameters.page = newPage;
      this.getDirectorysList();
    },

    //  添加取消事件
    canclelass() {
      // console.log('取消')
      this.$refs.ref.resetFields();
      this.dialogVisible = false;
      this.getDirectorysList();
    },

    // 取消修改按钮
    editCanclelass() {
      // console.log('取消')
      this.editForm = {};
      this.editdialogVisible = false;
      this.getDirectorysList();
    },

    // 改变状态
    async changeStates(row) {
      const res = await changeState({
        id: row.id,
        state: 1
      });
      console.log(row.state);

      console.log(res);

      if (res.status !== 200) return this.$message.error("修改状态失败");
      this.getDirectorysList();
      console.log(row.state);
    },

    // 搜索学科列表
    handleSearch() {
      this.requestParameters.page = 1;
      this.getDirectorysList();
    },

    // 获取数据列表
    async getDirectorysList(params) {
      const { data: res } = await list(this.requestParameters);
      console.log(res);
      this.directoryslist = res.items;
      // 获取总条数
      this.total = res.counts;
    },

    // 添加确认按钮
    async addClass(val) {
      // console.log(val)
      this.ruleForm = val;
      const { data: res } = await add(this.ruleForm);
      // console.log(res)
      this.dialogVisible = false;
      this.getDirectorysList();
    },

    // 修改按钮
    async handleChange(val) {
      console.log(val);
      this.editForm = {
        id: val.id,
        creatorID: val.creatorID,
        directoryName: val.directoryName
      };
      // console.log(this.editForm)
      this.editdialogVisible = true;
    },

    // 确认修改按钮
    async addEditClass(val) {
      // console.log(val)
      this.editForm = val;
      // console.log(this.editForm)
      const { data: res } = await update(this.editForm);
      // console.log(res)
      this.editdialogVisible = false;
    },

    // 禁用按钮
    async disabled(id, state) {
      let state1 = state === 1 ? 0 : 1;
      const res = await changeState({
        id: id,
        state: state1
      });
      if (res.status !== 200) return this.$message.error("操作失败");
      this.$message.success("操作成功");
      this.getDirectorysList();
    },

    // 点击删除按钮
    async remove(id) {
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      console.log(res);
      if (res === "confirm") {
        // 确认删除
        const result = await remove({
          id
        });
        if (result.status !== 200) return this.$message.error("删除失败");
        this.$message.success("删除成功");
        // 更新数据
        this.getTagsList();
      }
    },

    // 删除按钮
    async removeUser(val) {
      console.log(val);
      if (val.totals === 0) {
        const { data: res } = await remove({ id: val.id });
        this.directoryslist.splice(val.id, 1);
      }
      // console.log(res)
      this.getDirectorysList();
    }
  },

  // 对话框下拉数据--待改善
  async getList() {
    const { data: res } = await sublist();
    console.log(res);
    this.mylist = res.items;
  }
};
</script>

<style scoped>
.alert {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 8px 16px;
}
.dashboard-container {
  margin: 10px;
}
.el-card {
  margin-top: 10px;
}
.el-form {
  padding-top: 10px;
}
.el-table {
  margin-top: -5px;
}
.el-pagination {
  padding-top: 15px;
}
</style>


